<template>
  <div class="app-container">
    <avue-crud :option="option"
               :table-loading="loading"
               :data="data"
               :page="page"
               :permission="permissionList"
               :before-open="beforeOpen"
               v-model="form"
               ref="crud"
               @row-update="rowUpdate"
               @row-save="rowSave"
               @row-del="rowDel"
               @search-change="searchChange"
               @search-reset="searchReset"
               @selection-change="selectionChange"
               @current-change="currentChange"
               @size-change="sizeChange"
               @refresh-change="refreshChange"
               @on-load="onLoad">
      <template slot="menuLeft">

      </template>
      <template slot-scope="{row}" slot="avatar">
        <el-image :preview-src-list="row.avatarList" style="width: 50px; height: 50px" :src="row.avatar"></el-image>
      </template>
      <template slot-scope="{row}" slot="albums">
        <el-image :preview-src-list="row.albumList" style="width: 50px; height: 50px" :src="row.album"></el-image>
      </template>
      <template slot-scope="scope" slot="menu">
        <el-button size="mini"  @click.stop="handleBlack(scope.row)">拉黑</el-button>
      </template>
    </avue-crud>

    <!-- 添加或修改评论回复对话框 -->
    <el-dialog :title="title" :visible.sync="open" width="800px" append-to-body>
      <config v-if="open"></config>
    </el-dialog>

    <el-dialog title="上传文件" :visible.sync="upload" width="800px" append-to-body>
      <div class="upload-box" v-if="upload">
        <el-upload
          class="upload-demo"
          drag
          :action="action"
          :headers="headers"
          :on-success="handleSuccess"
          multiple>
          <i class="el-icon-upload"></i>
          <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
          <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过500kb</div>
        </el-upload>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getListByPage, getUser, delUser, addBlack, updateUser, resetUserPwd, changeUserStatus, deptTreeSelect } from "@/api/system/user";
import { getToken } from "@/utils/auth";
import config from "@/views/oss/oss/config";

export default {
  name: "Reply",
  components: {
    config
  },
  data() {
    return {
      action: process.env.VUE_APP_BASE_API + "/oss/oss/upload", // 上传的图片服务器地址
      headers: {
        Authorization: "Bearer " + getToken(),
      },
      title: "",
      open: false,
      upload: false,
      form: {},
      query: {},
      loading: true,
      page: {
        pageSize: 10,
        currentPage: 1,
        total: 0
      },
      selectionList: [],
      option: {
        height:'auto',
        calcHeight: 30,
        tip: false,
        searchShow: true,
        searchMenuSpan: 6,
        border: true,
        index: true,
        viewBtn: true,
        addBtn: false,
        selection: true,
        dialogClickModal: false,
        menuWidth: 120,
        menu: true,
        column: [
          {
            label: "昵称",
            search: true,
            prop: "nickName",
          },
          {
            label: '性别',
            prop: 'sex',
            search: true,
            type: 'select',
            filterable: true,
            dicData: [{
                label: '男',
                value: '0'
            }, {
                label: '女',
                value: '1'
            }],
            rules: [
              {
                required: true,
                message: '请选择评标规则',
                trigger: 'blur'
              }
            ]
          },
          {
            label: "头像",
            slot: true,
            prop: "avatar",
          },
          {
            label: "相册",
            slot: true,
            prop: "albums",
          },
          {
            label: "签名",
            prop: "signName",
          },
          {
            label: "自我介绍",
            prop: "introduce",
          },
        ]
      },
      data: [],
    };
  },
  computed: {
    permissionList() {
      return {
        addBtn: false,
        viewBtn: false,
        delBtn: false,
        editBtn: false
      };
    },
    ids() {
      let ids = [];
      this.selectionList.forEach(ele => {
        ids.push(ele.id);
      });
      return ids.join(",");
    }
  },
  methods: {
    handleAdd() {
      this.open = true;
      this.title = "云存储配置";
    },
    handleDelete() {
      if (this.selectionList.length === 0) {
        this.$message.warning("请选择至少一条数据");
        return;
      }
      this.$confirm("确定将选择数据删除?", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          return remove(this.ids);
        })
        .then(() => {
          this.onLoad(this.page);
          this.$message({
            type: "success",
            message: "操作成功!"
          });
          this.$refs.crud.toggleSelection();
        });
    },
    handleUpload() {
      this.upload = true;
    },
    refreshChange() {
      this.onLoad(this.page, this.query);
    },
    handleBlack(row) {
      addBlack(row).then(response => {
        this.$modal.msgSuccess("拉黑成功");
        this.refreshChange();
      });
    },
    handleSuccess(response, file, fileList) {
      this.refreshChange();
      this.upload = false;
    },
    searchReset() {
      this.query = {};
      this.onLoad(this.page);
    },
    searchChange(params, done) {
      this.query = params;
      this.page.currentPage = 1;
      this.onLoad(this.page, params);
      done();
    },
    selectionChange(list) {
      this.selectionList = list;
    },
    selectionClear() {
      this.selectionList = [];
      this.$refs.crud.toggleSelection();
    },
    currentChange(currentPage){
      this.page.currentPage = currentPage;
    },
    sizeChange(pageSize){
      this.page.pageSize = pageSize;
    },
    onLoad(page, params = {}) {
      this.loading = true;
      getListByPage(page.currentPage, page.pageSize, Object.assign(params, this.query)).then(res => {
        this.loading = false;
        this.page.total = res.total;
        this.data = res.rows;
        for(var i=0;this.data.length;i++){
          var item = this.data[i];
          item.avatarList = [item.avatar];
          if(item.albums){
            item.albumList = item.albums.split(',');
          }else{
            item.albumList = [];
          }
          item.album = item.albumList[0];
        }
        this.selectionClear();
      });
    },
  }
};
</script>

<style lang="scss" scoped>
  .upload-box{
    display: flex;
    justify-content: center;
    align-items: center;
  }
</style>
